<template>
  <div class="car-container">
    <el-breadcrumb
      class="breadcrumb-margin"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card full-card">
      <div slot="header" class="header-container">
        <el-row :gutter="20" class="card-row">
          <el-col :span="11">
            <el-input
              placeholder="请输入分类名称(空值默认查询所有分类)"
              v-model="selectName"
              clearable
              class="input-with-select"
              @keyup.enter.native="selectCategory({ name: selectName,type:selectType, page: 1, pageSize: 10 })"
              @clear="selectCategory({ name: null,type:selectType, page: 1, pageSize: 10 })"
            >
            <el-select  v-model="selectType" slot="prepend" placeholder="所有分类" @change="selectCategory({ name: selectName,type:selectType, page: 1, pageSize: 10 })">
                <el-option label="所有分类" :value="null" > </el-option>
                <el-option label="产品分类" :value="1"></el-option>
                <el-option label="套餐分类" :value="2"></el-option>    
            </el-select>
              <template slot="append">
                <el-button
                  icon="el-icon-search"
                  @click="
                    selectCategory({ name: selectName,type:selectType, page: 1, pageSize: 10 })
                  "
                ></el-button>
              </template>
            </el-input>
          </el-col>
          <el-con :span="4">
            <el-button type="success" @click="dialogAddVisible = true"
              >添加分类</el-button
            >
          </el-con>
        </el-row>
      </div>

      <el-table
        :data="categoryList"
        border
        style="width: 100%"
        class="hospital-table"
      >
        <el-table-column type="index" label="#" width="70"> </el-table-column>
        <el-table-column prop="name" label="分类名称" width="121">
        </el-table-column>
        <el-table-column prop="type" label="分类类型" width="120">
            <template slot-scope="scope">
        <!-- 根据不同的状态值显示不同的内容 -->
        <span v-if="scope.row.type === 1 ">产品分类</span>
        <span v-else>套餐分类</span>
        </template>
        </el-table-column>
         <el-table-column prop="createUser" label="创建人" width="100">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200">
        </el-table-column>
       <el-table-column prop="updateUser" label="修改人" width="100">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="200">
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="90">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="updateStatus(scope.row.status, scope.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="slot">
            <el-tooltip
              effect="dark"
              content="修改"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="selectCategoryById(slot.row.id)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="删除"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteCategory(slot.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSelect.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="所添加分类信息"
      :visible.sync="dialogAddVisible"
       width="50%"
      :before-close="handleClose"
       custom-class="hospital-dialog"
    >
      <el-form
        :model="categoryDto"
        :rules="rules"
        ref="categoryForm"
        label-width="120px"
        class="categoryForm hospital-form"
      >
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="categoryDto.name"></el-input>
        </el-form-item>
        <el-form-item label="分类类别" prop="type">
          <el-radio-group v-model="categoryDto.type">
            <el-radio :label="1">产品分类</el-radio>
            <el-radio :label="2">套餐分类</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer hospital-dialog-footer">
        <el-button @click="cancelDialog()" class="cancel-button"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitForm(categoryDto)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="所修改分类信息"
      :visible.sync="dialogUpdateVisible"
       width="50%"
      :before-close="handleClose"
       custom-class="hospital-dialog"
    >
      <el-form
        :model="categoryDto"
        :rules="rules"
        ref="categoryForm"
        label-width="120px"
        class="categoryForm hospital-form"
      >
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="categoryDto.name"></el-input>
        </el-form-item>
        <el-form-item label="分类类别" prop="type">
          <el-radio-group v-model="categoryDto.type">
            <el-radio :label="1">产品分类</el-radio>
            <el-radio :label="2">套餐分类</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer hospital-dialog-footer">
        <el-button @click="cancelDialog()" class="cancel-button"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitUpdateForm(categoryDto)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CategoryVue",
  data(){
    return{
    categoryList:[],
    pageSelect: {
        name:"",
        type:null,
        page: 1,
        pageSize:10,
    },
    total:[],
    currentPage:1,
     dialogAddVisible: false,
      dialogUpdateVisible: false,
      selectName: null,
      selectType:null,
      categoryDto:{
        name:"",
        sort:null,
        id:null,
        type:null,
      }
    }
  },
  methods:{
    
    async selectCategory(pageSelect){
        const result = await this.$http.get("webPage/category/pageSelect", {
        params: {
         name: pageSelect.name,
         type: pageSelect.type,
         page: pageSelect.page,
         pageSize: pageSelect.pageSize    
        },
      });
      this.categoryList = result.data.data.records;
      this.total = result.data.data.total;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    async handleCurrentChange() {
      this.selectCategory({name:null,page:this.currentPage,pageSize:this.pageSelect.pageSize})
    },
    async updateStatus(afterStatus, id) {
      this.$http.post(`/webPage/category/status/${afterStatus}?id=${id}`);
    },
    cancelDialog(){
        this.dialogAddVisible=false,
        this.categoryDto.name=null,
        this.categoryDto.type=null
        this.dialogUpdateVisible=false
    },
    submitForm(categoryDto){
        this.$http.post("webPage/category/add",{
            name: categoryDto.name,
            type: categoryDto.type,
            id: null
        }).then(
            ()=>{
                this.selectCategory({name:null,page:this.currentPage,pageSize:this.pageSelect.pageSize});
                this.dialogAddVisible=false;
                this.categoryDto.name=null,
                this.categoryDto.type=null,
                this.$message.success("添加成功")
            }
        )
    },
    deleteCategory(id){
      this.$http.delete(`/webPage/category/delete?id=${id}`).then((res)=>{
        if(res.data.code===1){
          this.$message.success("删除成功");
          this.selectCategory({name:null,type:null,page:this.currentPage,pageSize:this.pageSelect.pageSize})
        }
      })
    },
    async selectCategoryById(id){
      
        const res = await this.$http.get("/webPage/category/selectById",{params:{
          id: id 
        }});
        this.categoryDto=res.data.data
        this.dialogUpdateVisible= true;
    },
    async selectCategoryByType(){
        const type = this.selectType !== null ? this.selectType : '';
        const res = await this.$http.get(`/webPage/category/selectByType?type=${type}`)
        this.categoryList = res.data.data
    },
    submitUpdateForm(categoryDto){
      this.$http.put("/webPage/category/update",categoryDto).then((res)=>{
        if(res.data.code===1){
          this.selectCategory({name:null,type:null,page:this.currentPage,pageSize:this.pageSelect.pageSize})
          this.dialogUpdateVisible=false
          this.$message.success("修改成功")
        }
      })
    },
     
  },

  created(){
    this.selectCategory({name:null,page:this.pageSelect.page,pageSize:this.pageSelect.pageSize})
  }
};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

/* 添加 breadcrumb-margin 类并设置 margin-bottom */
.breadcrumb-margin {
  margin-bottom: 20px; /* 调整此值可以控制距离 */
}

/* 父容器 card-container 设为 flex 布局，确保卡片占满剩余空间 */
.card-container {
  .card-container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 100vh;
    background-color: #eef1f6; /* 使用浅色背景，符合医院风格 */
  }
}

/* 卡片整体占满剩余空间 */
.full-card {
  width: calc(100% - 30px); /* 减少右端30px的间距 */
  margin-top: 10px; /* 减少与面包屑的距离 */
  margin-right: 30px; /* 设置与右端的距离 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 调整阴影为轻量风格 */
  border-radius: 6px; /* 圆角效果 */
  padding: 15px; /* 调整卡片内边距 */
  background-color: #f9f9f9; /* 更加柔和的背景色，适合医院风格 */
}


/* 表格样式美化，符合医院风格 */
.hospital-table {
  border: 1px solid #e0e0e0; /* 调整边框颜色 */
  border-radius: 6px; /* 表格边角圆滑 */
}

.hospital-table :deep(.el-table__header-wrapper) {
  background-color: #edf2fa; /* 更柔和的表头颜色 */
}

.hospital-table :deep(th) {
  text-align: center;
  background-color: #f0f4f8; /* 更柔和的表头颜色 */
  font-weight: bold;
  font-size: 14px;
  color: #3a7fda; /* 专业的蓝色 */
}

.hospital-table :deep(td) {
  padding: 12px 8px; /* 增加单元格间距 */
  text-align: center;
  font-size: 14px;
  color: #5a6b7c; /* 字体颜色微调，更加舒适 */
  border-bottom: 1px solid #ebebeb; /* 调整行间隔 */
}
.hospital-table :deep(.el-table__body tr:nth-child(odd)) {
  background-color: #f9f9f9; /* 浅色背景 */
}

.hospital-table :deep(.el-table__body tr:nth-child(even)) {
  background-color: #ffffff; /* 白色背景 */
}

.hospital-table :deep(.el-table__body tr:hover) {
  background-color: #c3e2fd !important; /* 更浅的浅蓝色背景 */
}
.hospital-table :deep(.el-table__body td:hover) {
  background-color: #7bc3f6 !important; /* 较深的浅蓝色背景 */
}
/* 解决鼠标切换行时悬浮效果不立即生效的问题 */
.hospital-table :deep(.el-table__row:hover td) {
  background-color: #c3e2fd !important; /* 确保鼠标悬停时整行生效 */
}
.hospital-table :deep(.el-table__row td:hover) {
  background-color: #7bc3f6 !important; /* 鼠标悬停在单元格上时单元格高亮 */
}

/* 操作列的按钮样式 */
.table-action-btn {
  color: #3b82f6; /* 医疗风格的蓝色 */
  font-weight: bold;
}

.header-container {
  height: 50px; /* 增加头部高度，给元素更多空间 */
  background-color: #f0f4f8; /* 更加柔和的背景色 */
  border-bottom: 1px solid #dcdfe6; /* 下边框，增加分隔感 */
  padding: 10px 15px; /* 添加内边距 */
}
.input-with-select {
  height: 40px; /* 调整输入框高度 */
  border-radius: 4px; /* 添加圆角 */
  border: 1px solid #dcdfe6; /* 边框颜色与整体风格统一 */
}

.card-row {
  height: 50px;
  display: flex;
  align-items: center;
}
/* 分页样式优化 */
.block {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.el-pagination {
  background-color: #f9fafc; /* 分页区域背景 */
  padding: 10px 15px; /* 分页内边距 */
  border-radius: 6px; /* 圆角效果 */
}

.el-pagination :deep(.el-pager li) {
  font-size: 14px;
  color: #3a7fda; /* 使用专业蓝色 */
  margin: 0 5px;
}

.el-pagination :deep(.el-pager li.active) {
  background-color: #3a7fda;
  color: #fff;
}

/* 表单项悬浮效果 */
.input-with-select:hover,
.el-select:hover,
.el-input:hover,
.el-input__inner:hover {
  background-color: #e3f2fd; /* 与表格行悬浮效果一致的背景色 */
  border-color: #3a7fda; /* 改变边框颜色，突出效果 */
}

.avatar-uploader {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden; /* 圆形裁剪图片 */
  cursor: pointer;
  border: 2px solid #f0f0f0; /* 轻微的边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: all 0.3s ease; /* 动画过渡效果 */
}

.avatar-uploader:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加阴影 */
  transform: scale(1.05); /* 悬停时轻微放大 */
}

.avatar-container {
  width: 100px; /* 可以根据需求调整 */
  height: 100px; /* 可以根据需求调整 */
  border-radius: 50%;
  overflow: hidden; /* 圆形裁剪图片 */
  border: 2px solid #f0f0f0; /* 轻微的边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: all 0.3s ease; /* 动画过渡效果 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-container:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加阴影 */
  transform: scale(1.05); /* 悬停时轻微放大 */
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片按比例裁剪，保持覆盖 */
  border-radius: 50%; /* 将图片本身也裁剪成圆形 */
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f0f0f0; /* 默认背景色 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.avatar-uploader-icon:hover {
  background-color: #e6e6e6; /* 鼠标悬停时背景变浅 */
}

::v-deep .hospital-dialog {
  background-color: #c0d7f8; /* 柔和的背景色 */
  border-radius: 10px; /* 圆角边框 */
  padding: 15px; /* 内边距增加，保持空间感 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* 轻量阴影 */
}

::v-deep .hospital-form {
  background-color: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 表单项之间增加间距 */
::v-deep .el-form-item {
  margin-bottom: 16px;
}

.el-select{
  width: 120px;
  height: 36px; /* 统一输入框高度 */
  border-radius: 6px; /* 边框圆角 */
  border-color: #d1d9e6; /* 边框颜色更浅 */
  padding: 0 10px;
}
.el-input__inner,
 .el-input__inner {
  height: 36px; /* 统一输入框高度 */
  border-radius: 6px; /* 边框圆角 */
  background-color: #a8cbff; /* 浅色背景 */
  border-color: #d1d9e6; /* 边框颜色更浅 */
  padding: 0 10px;
}

/* 输入框、选择框和单选框的悬停效果 */
::v-deep .el-input__inner:hover,
.el-select:hover,
.el-radio:hover {
  border-color: #3a7fda; /* 悬停时边框加深 */
  background-color: #eaf2fd; /* 背景色变浅 */
}

/* 表单标签样式美化 */
::v-deep .el-form-item__label {
  color: #34495e; /* 统一字体颜色 */
  font-weight: 600; /* 字体加粗 */
  font-size: 14px; /* 合适的字体大小 */
}
/* 调整单选框的大小 */
.el-radio__label {
  font-size: 13px !important; /* 单选框标签字体大小调整 */
}
</style>